<template>
  <view>
    <!-- index.wxml -->
    <view class="backspace-view">
      <view class="wrapper">
        <view class="body">
          <view class="body-top">
            <view class="revenue">
              <view v-for="(item, index) in revenueList" :key="index">
                <view class="revenue-title">{{ item.title }}</view>
                <view class="revenue-value">{{ item.value }}</view>
              </view>
            </view>
            <view class="month">
              <view class="month-title">本月营收</view>
              <view class="month-value">{{ monthMoney }}</view>
            </view>
            <view class="stock">
              <view class="stock-title">
                <image src="/static/xintu/xiaoliang.png" alt=""/>
                <view>库存数量</view>
              </view>
              <view class="stock-body">
                <view
                    class="list"
                    v-for="(item, index) in kucun"
                    :key="index"
                    @click="OpenPage(item.page,item.status)"
                >
                  <text class="list-value">{{ item.value }}</text>
                  <text class="list-title">{{ item.title }}</text>
                </view>
              </view>
            </view>
            <view class="stock">
              <view class="stock-title">
                <image src="/static/xintu/xiaoliang.png" alt=""/>
                <text>销量</text>
              </view>
              <view class="stock-body">
                <view
                    @click="OpenPage(item.page,item.status)"
                    class="list"
                    v-for="(item, index) in xiaoliang"
                    :key="index"
                >
                  <text class="list-value">{{ item.value }}</text>
                  <text class="list-title">{{ item.title }}</text>
                </view>
              </view>
            </view>
          </view>
          <view class="column">
            <view class="tongji ">
              <view class="tongji-title">
                <image src="/static/xintu/fuwu.png" alt=""/>
                <text>服务统计</text>
              </view>
              <view class="tongji-list">
                <view
                    class="list"
                    v-for="(item, index) in fuwu"
                    :key="index"
                    @click=""
                >
                  <image :src="item.url" alt=""/>
                  <text class="list-title">{{ item.title }}</text>
                </view>
              </view>
            </view>
            <view class="tongji">
              <view class="tongji-title">
                <image src="/static/xintu/baobiao.png"/>
                <view>销售报表</view>
              </view>
              <view class="tongji-list">
                <view
                    class="list"
                    v-for="(item, index) in xiaoshou"
                    :key="index"
                    @click="OpenPage(item.page)"
                >
                  <image :src="item.url" alt=""/>
                  <text class="list-title">{{ item.title }}</text>
                </view>
              </view>
            </view>
            <view class="tongji">
              <view class="tongji-title">
                <image src="/static/xintu/baobiao.png" alt=""/>
                <view>周转报表</view>
              </view>
              <view class="tongji-list">
                <view
                    class="list"
                    v-for="(item, index) in zhouzhuan"
                    :key="index"
                    @click=""
                >
                  <image :src="item.url" alt=""/>
                  <text class="list-title">{{ item.title }}</text>
                </view>
              </view>
            </view>
            <view class="tongji">
              <view class="tongji-title">
                <image src="/static/xintu/baobiao.png" alt=""/>
                <text>财务报表</text>
              </view>
              <view class="tongji-list">
                <view
                    class="list"
                    v-for="(item, index) in finance"
                    :key="index"
                    @click=""
                >
                  <image :src="item.url" alt=""/>
                  <text class="list-title">{{ item.title }}</text>
                </view>
              </view>
            </view>
            <view class="tongji">
              <view class="tongji-title">
                <img src="/static/xintu/mendian.png" alt=""/>
                <view>门店管理</view>
              </view>
              <view class="tongji-list">
                <view
                    class="list"
                    v-for="(item, index) in mendian"
                    :key="index"
                    @click=""
                >
                  <image :src="item.url" alt=""/>
                  <text class="list-title">{{ item.title }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <upgrade ref="updatePopup" :is-show="true"/>
  </view>
</template>

<script>

import {getAction} from "../utils/action";
import Upgrade from "../components/upgrade.vue";
import appUpgrade from "../utils/AppUpgrade";

export default {
  components: {Upgrade},
  data() {
    return {
      revenueList: [
        {
          title: "今日营收",
          value: "0",
        },
        {
          title: "今日退款",
          value: "0",
        },
        {
          title: "昨日营收",
          value: "0",
        },
        {
          title: "近7天营收",
          value: "0",
        },
      ],
      fuwu: [
        {
          title: "门店",
          url: "/static/xintu/all.png",
          type: "md",
        },
        {
          title: "记录",
          url: "/static/xintu/tj.png",
          type: "all",
        },
      ], //服务统计
      xiaoshou: [
        // {
        //   title: "烤梨",
        //   url: "/static/xintu/p1.png",
        //   type: "phone",
        // },
        // {
        //   title: "红薯",
        //   url: "/static/xintu/iot.png",
        //   type: "iot",
        // },
        // {
        //   title: "配料",
        //   url: "/static/xintu/pj.png",
        //   type: "parts",
        // },
        {
          title: "人员销量",
          url: "/static/xintu/xl.png",
          type: "phone",
        },
        // {
        //   title: "销售日报",
        //   url: "/static/image/index/finance4.png",
        // },
        {
          title: "销售数据",
          url: "/static/image/index/finance4.png",
          page: "table"
        },
        {
          title: "销售报表",
          url: "/static/image/index/finance1.png",
          page: "saleReport"
        },
      ], //销售统计
      zhouzhuan: [
        {
          title: "烤梨",
          url: "/static/xintu/p.png",
          type: "phone",
        },
        {
          title: "红薯",
          url: "/static/xintu/iot1.png",
          type: "iot",
        },
        {
          title: "配料",
          url: "/static/xintu/iot2.png",
          type: "parts",
        },
      ], //周转统计
      mendian: [
        {
          title: "人员统计",
          url: "/static/xintu/tj2.png",
        },
        {
          title: "信息展示",
          url: "/static/xintu/xx2.png",
        },
        {
          title: "历史销量",
          url: "/static/xintu/xl2.png",
        },
        {
          title: "门店库存",
          url: "/static/xintu/kc2.png",
        },
      ], //门店统计
      finance: [
        {
          title: "利润",
          url: "/static/image/index/finance1.png",
        },
        {
          title: "门店利润",
          url: "/static/image/index/finance2.png",
        },
        {
          title: "资产负债",
          url: "/static/image/index/finance3.png",
        },
      ], // 财务
      monthMoney: "0",
      xiaoliang: [
        {
          page: "saleList",
          status: "1",
          title: "烤梨",
          type: "phone",
        },
        {
          page: "saleList",
          status: "2",
          title: "红薯",
          type: "iot",
        },
        {
          page: "saleList",
          status: "3",
          title: "配料",
          type: "parts",
        },
      ],
      kucun: [
        {
          page: "inventoryList",
          status: "1",
          title: "烤梨",
          type: "phone",
        },
        {
          page: "inventoryList",
          status: "2",
          title: "红薯",
          type: "iot",
        },
        {
          page: "inventoryList",
          status: "3",
          title: "配料",
          type: "parts",
        }
      ],
      url: {
        statistics: "api/boss/statistics"
      }
    }
  },
  methods: {
    // 检测到更新时调用
    showUpdatePopup(newVersion, desc, isforce, url, type) {
      const updateInfo = {
        title: '版本更新 v' + newVersion,
        desc: desc,
        force: isforce, // 是否强制更新
        url: url, // 更新包路径
        type: type // 更新包类型 (apk/wgt)
      };
      this.$refs.updatePopup.show(updateInfo.title, updateInfo.desc, updateInfo.force, updateInfo.url, updateInfo.type);
    },
    OpenPage(page, type) {
      if (type) {
        if (page.length == 0) {
          uni.showToast({
            title: `功能暂未开放！`,
            icon: 'none'
          })
          return
        }
        //保留当前页面
        uni.navigateTo({
          url: page + "?type=" + type,
        })
      } else {
        uni.navigateTo({
          url: page,
        })
      }

    },
    /**
     * 通知信息点击事件
     */
    noticeBarClick() {

    },
    /**
     * 通知信息点击更多事件
     */
    noticeBarGetmore() {

    },
    async initData() {
      try {
        const res = await getAction(this.url.statistics);
        if (res.result) {
          // 1. 使用响应式数组更新方式
          this.revenueList = this.updateRevenueData(res.result);

          // 2. 直接赋值基础类型数据
          this.monthMoney = res.result.monthTotal;

          // 3. 优化库存数据处理
          this.kucun = this.processInventoryData(res.result.goodsStatistics);

          // 4. 重构销量数据处理
          this.xiaoliang = this.processSalesData(res.result.saleStatistics);
        }
      } catch (error) {
        console.error('数据获取失败:', error);
      }
    },
    // 处理营收数据更新
    updateRevenueData(result) {
      return this.revenueList.map((item, index) => {
        const values = [
          result.nowTotal,
          result.nowReturnsTotal,
          result.yesterdayTotal,
          result.sevenDayTotal
        ];
        return {...item, value: values[index]};
      });
    },
    // 处理库存数据
    processInventoryData(goodsData) {
      return this.kucun.map(kucunItem => {
        const match = goodsData.find(item =>
            item.classifyName?.toUpperCase() === kucunItem.title.toUpperCase()
        );
        return match ? {...kucunItem, value: match.inventoryTotal} : kucunItem;
      });
    },

    // 处理销售数据
    processSalesData(salesData) {
      return this.xiaoliang.map(xiaoliangItem => {
        const match = salesData.find(item =>
            item.classifyName?.toUpperCase() === xiaoliangItem.title.toUpperCase()
        );
        return match ? {...xiaoliangItem, value: match.saleTotal} : xiaoliangItem;
      });
    }
  },
  /**
   * 监听页面下拉刷新
   */
  onPullDownRefresh() {
    this.$modal.loading("刷新成功，请稍等.")
    this.initData()
    this.$modal.closeLoading()
    uni.stopPullDownRefresh();
  },
  /**
   * 页面显示事件
   */
  async onShow() {
    const updateInfo = await appUpgrade.checkVersion()
    if (updateInfo && updateInfo.hasUpdate) {
      // 显示更新对话框
      this.showUpdatePopup(updateInfo.newVersion, updateInfo.description, updateInfo.isForce, updateInfo.downloadUrl, updateInfo.packageType)
    }
  },
  /**
   * 加载页面事件
   */
  onLoad: function () {
    //获取当前登陆人角色
    this.role = this.$store.state.user.roles;
    this.initData()
  }
}
</script>
<style lang="scss">

/* 颜色变量定义 */
$primary-blue: #4664ff;
$accent-orange: #ff6b35;
$text-dark: #2d3436;
$text-gray: #666;
$bg-light: #f8f9fb;

view {
  font-size: 14px;
  line-height: inherit;
}

.uni-badge-left-margin {
  margin-left: 3px;
  text-align: center;
}

.backspace-view {
  width: 100%; /* 容器宽度 */
  height: 100%; /* 容器高度，根据需要调整 */
  position: relative;
  background-color: #ffffff;

  .wrapper {
    position: relative;
    z-index: 1;
    padding-top: 7%;

    .body {
      // padding: 0 30px;
      flex: 1;
      overflow: hidden;

      .body-top {
        padding: 0 20rpx 20rpx;
        position: relative;
        z-index: 999;
        background: url("../static/xintu/bg.png");

        .revenue {
          font-size: 18px;
          color: #ffffff;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          padding-top: 40rpx;

          > view {
            width: calc(50% - 15px);
            border-radius: 10px;
            backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: all 0.3s ease;

            &:first-child {
              background-color: #feae16;
            }

            &:nth-child(2) {
              background-color: #ff789e;
            }

            &:nth-child(3) {
              background-color: #9976f3;
            }

            &:last-child {
              background-color: #f88a40;
            }
          }

          > view:nth-child(n + 3) {
            margin-top: 20rpx;
          }

          &-title {
            color: #ffffff;
            padding: 15rpx 0 15rpx 28rpx;
            color: rgba(255, 255, 255, 0.9) !important;
            font-size: 28rpx;
            font-weight: 500;
          }

          &-value {
            padding: 0 0 20rpx 25rpx;
            color: #fff !important;
            font-size: 36rpx;
            font-weight: 700;
            text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
          }
        }

        // 本月营收
        .month {
          font-size: 23rpx;
          color: #ffffff;
          background-color: #4664ff;
          margin: 20rpx 0;
          padding: 15rpx 20rpx;
          border: 1px solid rgba(255, 255, 255, 0.2);
          border-radius: 16rpx !important;

          &-title {
            padding-bottom: 17rpx;
            color: rgba(255, 255, 255, 0.9) !important;
            font-weight: 500;
          }

          &-value {
            color: #fff !important;
            font-size: 44rpx;
            letter-spacing: 1rpx;
          }
        }

        .stock {
          font-size: 18rpx;
          color: #333333;
          margin-top: 20rpx;
          background: rgba(255, 255, 255, 0.95) !important;
          box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.04) !important;
          border-radius: 16rpx !important;

          &-title {
            font-size: 18px;
            display: flex;
            align-items: center;
            color: $text-dark !important;
            font-weight: 600;
            padding: 28rpx 32rpx 0 !important;

            > image {
              width: 28rpx;
              height: 28rpx;
              margin-right: 15rpx;
              filter: drop-shadow(0 2px 4px rgba(70, 100, 255, 0.1));
            }
          }

          &-body {
            font-size: 18rpx;
            color: #333333;
            display: flex;
            padding: 20rpx 0;

            .list {
              width: 33.33%;
              display: flex;
              flex-direction: column;
              justify-content: center;
              text-align: center;

              &-value {
                color: $primary-blue !important;
                font-size: 36rpx;
                font-weight: 700;
              }

              &-title {
                color: $text-gray !important;
                font-size: 26rpx;
              }
            }
          }
        }
      }
    }
  }


}


.column {
  background-color: #ffffff;

  .tongji {
    font-size: 18px;
    color: #333333;
    border-bottom: 2px solid #efefef;
    border-radius: 16rpx !important;
    overflow: hidden;

    &-title {
      display: flex;
      align-items: center;
      background: $bg-light;
      padding: 32rpx !important;
      color: $text-dark !important;
      font-weight: 600;

      > image {
        width: 40rpx;
        height: 40rpx;
        padding-right: 15rpx;
        filter: brightness(0.9);
      }
    }

    &-list {
      display: inline-flex;
      grid-template-columns: repeat(auto-fit, minmax(240rpx, 1fr));
      gap: 40rpx;
      padding: 20rpx 90rpx;
      justify-content: space-between;

      .list {
        margin-left: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        transition: transform 0.2s;

        &:active {
          transform: scale(0.96);
        }

        image {
          width: 48rpx !important;
          height: 48rpx !important;
          margin-bottom: 16rpx;
        }

        &-title {
          text-align: center;
          white-space: normal;
          line-height: 1.4;
          color: $text-gray !important;
          font-size: 18rpx;
          font-weight: 500;
        }
      }
    }
  }
}

/* 全局细节优化 */
body {
  // 统一投影
  [class*="-title"] {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  }

  // 统一过渡动画
  [class*="revenue"], [class*="stock"], [class*="tongji"] {
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  // 优化分隔线
  .stock-body .list + .list {
    position: relative;

    &::before {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      height: 60%;
      width: 1px;
      background: rgba(0, 0, 0, 0.08);
    }
  }
}
</style>